<template>
  <card-layout title="环境监测建设情况" class="chart">
    <template #extra>
      <el-icon class="extra-more" :size="22">
        <Menu />
      </el-icon>
    </template>
    <div class="chart-items">
      <div class="item">
        <div class="title">监测点(个)</div>
        <div class="bar-chart" ref="chartRef1"></div>
      </div>
      <div class="item">
        <div class="title">使用基金(万元)</div>
        <div class="bar-chart" ref="chartRef2"></div>
      </div>
    </div>
  </card-layout>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import useChart from "@/hooks/useCharts.js";
const chartRef1 = ref(null);
const chartRef2 = ref(null);
let { chartInstance } = useChart(chartRef1);
let chartInstance2 = useChart(chartRef2).chartInstance;
// 初始化图表
const initChart = () => {
  const option = {
    tooltip: {
      show: true,
    },
    legend: { show: false },
    grid: {
      show: false,
      top: 4,
      bottom: 0,
      right: 16,
      left: 12,
      containLabel: true,
    },
    xAxis: {
      type: 'value',
      boundaryGap: [0, 0.01],
      axisLine: {
        show: false,
      },
      splitLine: {
        show: false,
      }
    },
    yAxis: {
      type: 'category',
      data: ['实际建设', '计划建设'],
      splitLine: {
        show: false,
      }
    },
    series: [
      {
        name: '计划',
        type: 'bar',
        showBackground: true,
        data: [57, 75]
      },

    ]
  };
  chartInstance.value.setOption(option);
};

// 初始化图表
const initChart2 = () => {
  const option = {
    tooltip: {
      show: true,
    },
    legend: { show: false },
    grid: {
      show: false,
      top: 4,
      bottom: 0,
      right: 16,
      left: 12,
      containLabel: true,
    },
    xAxis: {
      type: 'value',
      boundaryGap: [0, 0.01],
      axisLine: {
        show: false,
      },
      splitLine: {
        show: false,
      }
    },
    yAxis: {
      type: 'category',
      data: ['实际提取', '计划提取'],
      splitLine: {
        show: false,
      }
    },
    series: [
      {
        name: '计划',
        type: 'bar',
        showBackground: true,
        data: [2321.56, 1847.63]
      },

    ]
  };
  chartInstance2.value.setOption(option);
};

onMounted(() => {
  initChart();
  initChart2();
});
</script>

<style lang="scss" scoped>
.chart {
  box-sizing: border-box;
  flex: 1;
  display: flex;
  flex-direction: column;

  .chart-items {
    height: 100%;
    box-sizing: border-box;
    padding: 8px;
    display: flex;
    flex-direction: column;

    .item {
      flex: 1;
      display: flex;
      flex-direction: column;

      .title {
        color: #dedede;
      }

      .bar-chart {
        flex: 1;
      }
    }
  }
}
</style>
